/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable no-script-url */
import React, { memo, useCallback, useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux'

import { getTopBannersAction } from '../../store/actionCreators'

import { Wrap } from './style'
import { Carousel } from 'antd';
export default memo(function TopBannner() {
    
    const { topBanners } = useSelector(state => ({
        // topBanners:state.get('recommend').get('topBanners')
        topBanners:state.getIn(['recommend', 'topBanners'])
    }),shallowEqual)
    //shallowEqual 浅层比较

    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(getTopBannersAction())
    }, [dispatch])
    //state
    const [current , setCurrent] = useState(0)

    let bgImg = topBanners[current] ? (topBanners[current].imageUrl + '?imageView&blur=40x20'):''

    //ref
    const bannerRef = useRef()

    //callBack
    const changeCurrent = useCallback((from,to)=>{
        setCurrent(to)
    },[])
    
    const changeCurrent2 = useCallback(type => {
        if(type === true){
            if(current === topBanners.length-1){
                //最右了
                setCurrent(0)
            }else{
                setCurrent(current + 1)
            }
            bannerRef.current.next()
        }else{
            if(current === 0){
                //最左了
                setCurrent(topBanners.length)
            }else{
                setCurrent(current - 1)
            }
            bannerRef.current.prev()
        }
    },[topBanners.length,current])
    return (
        <Wrap bgImg={bgImg}>
            <div className="center">
                <a hidefocus="true" className="jump" onClick={()=> changeCurrent2(false)}> </a>
                <a hidefocus="true" className="jump" onClick={()=> changeCurrent2(true)} > </a>
                <div className="left">
                    {
                        topBanners.map((item,index) => (
                            <React.Fragment key={index}>
                                <img style={{width:'0px',height:'0px',position:'fixed',left:'-99999999px'}} src={item.imageUrl + '?imageView&quality=89'} alt=""/>
                                <img style={{width:'0px',height:'0px',position:'fixed',left:'-99999999px'}} src={item.imageUrl + '?imageView&blur=40x20'} alt=""/>
                            </React.Fragment>
                        ))
                    }
                    {/* 以上是预加载图片 */}
                    <Carousel effect="fade" ref={bannerRef} beforeChange={changeCurrent} autoplay={true} speed={2000}>
                        {
                            topBanners.map((item,index) => (
                                <div key={item.imageUrl}>
                                    <img className="img" src={item.imageUrl + '?imageView&quality=89'} alt=""/>
                                </div>
                            ))
                        }
                    </Carousel>
                </div>
                <div className="right">
                    <a href="https://music.163.com/#/download">下载客户端</a>
                    <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                </div>
            </div>
        </Wrap>
    )
})
